<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>My JSP 'chartList.jsp' starting page</title>
		<meta name="viewport" content="initial-scale = 1, user-scalable = no">
		<link href="${ctx}/static/bootstrap/2.1.1/css/bootstrap.css"
			type="text/css" rel="stylesheet" />
		<script src="${ctx}/static/jquery/1.7.2/jquery.js"
			type="text/javascript"></script>
		<script type="text/javascript">
$(function() {
		$("#dayDatepicker").datepicker({
			format : 'yyyy-mm-dd'
		});
		
	});
	
	$(function() {
		$("#mouthDatepicker").datepicker({
			format : 'yyyy-mm-dd'
		});
		
	});
	
	
	function dayFunction(){
	 window.location.href="${ctx}/chart/init/1";
	}
	
	function mouthFunction(){
	 window.location.href="${ctx}/chart/init/2";
	}
	
  function reloadDay(){
      window.location.href="${ctx}/chart/init/1?search_GTE_crtime="+$("#dayDatepicker").val();
  }
  
   function reloadMouth(){
      window.location.href="${ctx}/chart/init/2?search_GTE_crtime="+$("#mouthDatepicker").val();
  }
</script>
	</head>

	<body>
		<div class="tabbable">
			<ul class="nav nav-tabs">
				<li id="singlesId" class="${day }">
					<a href="#tab1" data-toggle="tab" onclick="dayFunction();"><span
						id="fold">每日报表</span> </a>
				</li>
				<li id="multiplesId" class="${mouth }">
					<a href="#tab2" data-toggle="tab" onclick="mouthFunction();"><span
						id="unfold">每月报表</span> </a>
				</li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane ${day }" id="tab1">
					<p>
						<a href="${ctx}/chart/init/1" class="btn btn-primary">今日</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<a href="${ctx}/chart/init/1?search_GTE_crtime=${yesterDay}"
							class="btn btn-primary">昨日</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<span class="btn btn-primary">选择时间</span>
						<input type="text" id="dayDatepicker" name="search_GTE_created"
							value="${param.search_GTE_crtime}">
						<span class="btn" onclick="reloadDay();">查询</span>
						<span class="add-on"><i class="icon-calendar"></i> </span>
					</p>
					<p>
						总订单数:${ediOrderAllLists}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|单件:${ediOrderSingleLists}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|多件:${ediOrderMultipleLists}
					</p>
					<div>
						<div>
							下单时间
						</div>
						<div>
							<canvas id="OrderHourCanvas" height="450" width="1500" style=""></canvas>
							<script>
	var zero = Number('${zero}');
	var one = Number('${one}');
	var two = Number('${two}');
	var three = Number('${three}');
	var four = Number('${four}');
	var five = Number('${five}');
	var six = Number('${six}');
	var seven = Number('${seven}');
	var eigth = Number('${eigth}');
	var nine = Number('${nine}');
	var ten = Number('${ten}');
	var eleven = Number('${eleven}');
	var twelve = Number('${twelve}');
	var thirteen = Number('${thirteen}');
	var fourteen = Number('${fourteen}');
	var fifteen = Number('${fifteen}');
	var sixteen = Number('${sixteen}');
	var seventeen = Number('${seventeen}');
	var eighteen = Number('${eighteen}');
	var nineteen = Number('${nineteen}');
	var twenty = Number('${twenty}');
	var twentyOne = Number('${twentyOne}');
	var twentyTwo = Number('${twentyTwo}');
	var twentyThree = Number('${twentyThree}');
	var barChartDataHour = {
		labels : [ "0(" + zero + ")", "1(" + one + ")", "2(" + two + ")",
				"3(" + three + ")", "4(" + four + ")", "5(" + five + ")",
				"6(" + six + ")", "7(" + seven + ")", "8(" + eigth + ")",
				"9(" + nine + ")", "10(" + ten + ")", "11(" + eleven + ")",
				"12(" + twelve + ")", "13(" + thirteen + ")",
				"14(" + fourteen + ")", "15(" + fifteen + ")",
				"16(" + sixteen + ")", "17(" + seventeen + ")",
				"18(" + eighteen + ")", "19(" + nineteen + ")",
				"20(" + twenty + ")", "21(" + twentyOne + ")",
				"22(" + twentyTwo + ")", "23(" + twentyThree + ")" ],
		datasets : [ {
			fillColor : "rgba(220,220,220,0.5)",
			strokeColor : "rgba(220,220,220,1)",
			data : [ zero, one, two, three, four, five, six, seven, eigth,
					nine, ten, eleven, twelve, thirteen, fourteen, fifteen,
					sixteen, seventeen, eighteen, nineteen, twenty, twentyOne,
					twentyTwo, twentyThree ]
		} ]

	};

	var myLineHour = new Chart(document.getElementById("OrderHourCanvas").getContext(
			"2d")).Bar(barChartDataHour);
</script>

						</div>
					</div>

					<div>
						<div>
							地区分布
						</div>
						<div>
							<canvas id="proviceDayCanvas" height="450" width="1500"></canvas>
							<script>
	var lineChartDataHour = {
		labels : ${key},
		datasets : [ {
			fillColor : "rgba(220,220,220,0.5)",
			strokeColor : "rgba(220,220,220,1)",
		    pointColor : "rgba(220,220,220,1)",
			pointStrokeColor : "#fff",
			data : ${value}
		}]
	};

	var myLine = new Chart(document.getElementById("proviceDayCanvas").getContext("2d")).Line(lineChartDataHour);
</script>


						</div>
					</div>

					<div>
						<div>
							网点覆盖
						</div>
						<div>
							<canvas id="areaGroupDayCanvas" height="450" width="1000"></canvas>

							<script>
	var areaGroupChartDataHour = {
		labels : ${areaGroupString},
		datasets : [ {
			fillColor : "rgba(220,220,220,0.5)",
			strokeColor : "rgba(220,220,220,1)",
		    pointColor : "rgba(220,220,220,1)",
			pointStrokeColor : "#fff",
			data : ${areaGroupNumber}
		}]
	};

	var myLine = new Chart(document.getElementById("areaGroupDayCanvas").getContext("2d")).Radar(areaGroupChartDataHour,{scaleShowLabels : false, pointLabelFontSize : 10});

</script>

						</div>
						<div id="areaGroupProviceIdDay"></div>
						<script type="text/javascript">
						 $("#areaGroupProviceIdDay").html('${areaGroupProvice}');
						</script>
					</div>
				</div>
				<div class="tab-pane ${mouth }" id="tab2">
					<div class="tab-pane">
						<p>
							<a href="${ctx}/chart/init/2" class="btn btn-primary">本月</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<a href="${ctx}/chart/init/2?search_GTE_crtime=${yesterDay}"
								class="btn btn-primary">次月</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<span class="btn btn-primary">选择月份</span>
							<input type="text" id="mouthDatepicker" name="search_GTE_created"
								value="${param.search_GTE_crtime}">
							<span class="btn" onclick="reloadMouth();">查询</span>
							<span class="add-on"><i class="icon-calendar"></i> </span>
						</p>
						<p>
							总订单数:${ediOrderAllLists}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|单件:${ediOrderSingleLists}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|多件:${ediOrderMultipleLists}
						</p>
						<div>
							<div>
								下单时间
							</div>
							<div>
								<canvas id="OrderMouthCanvas" height="450" width="1500"></canvas>
								<script>
	var zero = Number('${zero}');
	var one = Number('${one}');
	var two = Number('${two}');
	var three = Number('${three}');
	var four = Number('${four}');
	var five = Number('${five}');
	var six = Number('${six}');
	var seven = Number('${seven}');
	var eigth = Number('${eigth}');
	var nine = Number('${nine}');
	var ten = Number('${ten}');
	var eleven = Number('${eleven}');
	var twelve = Number('${twelve}');
	var thirteen = Number('${thirteen}');
	var fourteen = Number('${fourteen}');
	var fifteen = Number('${fifteen}');
	var sixteen = Number('${sixteen}');
	var seventeen = Number('${seventeen}');
	var eighteen = Number('${eighteen}');
	var nineteen = Number('${nineteen}');
	var twenty = Number('${twenty}');
	var twentyOne = Number('${twentyOne}');
	var twentyTwo = Number('${twentyTwo}');
	var twentyThree = Number('${twentyThree}');
	
	var twentyFour = Number('${twentyFour}');
	var twentyFive = Number('${twentyFive}');
	var twentySix = Number('${twentySix}');
	var twentySeven = Number('${twentySeven}');
	var twentyEigth = Number('${twentyEigth}');
	var twentyNine = Number('${twentyNine}');
	var thirty=Number('${thirty}');
	
	var barChartDataMouth = {
		labels : [ "1(" + zero + ")", "2(" + one + ")", "3(" + two + ")",
				"4(" + three + ")", "5(" + four + ")", "6(" + five + ")",
				"7(" + six + ")", "8(" + seven + ")", "9(" + eigth + ")",
				"10(" + nine + ")", "11(" + ten + ")", "12(" + eleven + ")",
				"13(" + twelve + ")", "14(" + thirteen + ")",
				"15(" + fourteen + ")", "16(" + fifteen + ")",
				"17(" + sixteen + ")", "18(" + seventeen + ")",
				"19(" + eighteen + ")", "20(" + nineteen + ")",
				"21(" + twenty + ")", "22(" + twentyOne + ")",
				"22(" + twentyTwo + ")", "24(" + twentyThree + ")", 
				"25(" + twentyFour + ")" , "26(" + twentyFive + ")",
				 "27(" + twentySix + ")", "28(" + twentySeven + ")",
				  "29(" + twentyEigth + ")",, "30(" + twentyNine + ")", "31(" + thirty + ")"],
		datasets : [ {
			fillColor : "rgba(220,220,220,0.5)",
			strokeColor : "rgba(220,220,220,1)",
			data : [ zero, one, two, three, four, five, six, seven, eigth,
					nine, ten, eleven, twelve, thirteen, fourteen, fifteen,
					sixteen, seventeen, eighteen, nineteen, twenty, twentyOne,
					twentyTwo, twentyThree ,twentyFour,twentyFive,twentySix,twentySeven,twentyEigth,twentyNine,thirty]
		} ]

	};

	var myLine = new Chart(document.getElementById("OrderMouthCanvas").getContext(
			"2d")).Bar(barChartDataMouth);
</script>

							</div>
						</div>

						<div>
							<div>
								地区分布
							</div>
							<div>
								<canvas id="proviceMouthCanvas" height="450" width="1500"></canvas>
								<script>
	var lineChartDataMouth = {
		labels : ${key},
		datasets : [ {
			fillColor : "rgba(220,220,220,0.5)",
			strokeColor : "rgba(220,220,220,1)",
		    pointColor : "rgba(220,220,220,1)",
			pointStrokeColor : "#fff",
			data : ${value}
		}]
	};

	var myLineMouth = new Chart(document.getElementById("proviceMouthCanvas").getContext("2d")).Line(lineChartDataMouth);
</script>


							</div>
						</div>

						<div>
							<div>
								网点覆盖
							</div>
							<div>
								<canvas id="areaGroupMouthCanvas" height="450" width="1000"></canvas>
								<script>
	var areaGroupChartDataMouth = {
		labels : ${areaGroupString},
		datasets : [ {
			fillColor : "rgba(220,220,220,0.5)",
			strokeColor : "rgba(220,220,220,1)",
		    pointColor : "rgba(220,220,220,1)",
			pointStrokeColor : "#fff",
			data : ${areaGroupNumber}
		}]
	};

	var myLineMouth = new Chart(document.getElementById("areaGroupMouthCanvas").getContext("2d")).Radar(areaGroupChartDataMouth,{scaleShowLabels : false, pointLabelFontSize : 10});

</script>

							</div>
							<div id="areaGroupProviceIdMouth"></div>
							<script type="text/javascript">$("#areaGroupProviceIdMouth").html('${areaGroupProvice}');</script>
						</div>
					</div>
				</div>
			</div>
	</body>
</html>
